<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文件 - Snapan</title>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/index.js" defer></script>
    <link rel="stylesheet" href="../static/css/index.css">
</head>
<body>
<div class="container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <div class="logo-section">
            <div class="logo">
                <div class="logo-icon">☁️</div>
                <div>Snapan</div>
            </div>
            <div class="storage-info" id="storageInfo">已使用 0 B / 0 B</div>
        </div>

        <div class="nav-section">
            <!-- 我的文件 - 带折叠功能 -->
            <div class="nav-dropdown">
                <a href="#" class="nav-item active" data-section="home" data-iframe-src="home.html" id="myFilesTrigger">
                    <div class="nav-icon">🏠</div>
                    <div>全部文件</div>
                    <div class="dropdown-arrow" id="myFilesArrow">▼</div>
                </a>
                
                <!-- 文件类型选项容器 -->
                <div class="file-types-container" id="fileTypesContainer">
                    <a href="#" class="nav-item file-type-item" data-type="image">
                        <div class="nav-icon">🖼️</div>
                        <div>图片</div>
                    </a>
                    <a href="#" class="nav-item file-type-item" data-type="document">
                        <div class="nav-icon">📄</div>
                        <div>文档</div>
                    </a>
                    <a href="#" class="nav-item file-type-item" data-type="video">
                        <div class="nav-icon">🎥</div>
                        <div>视频</div>
                    </a>
                    <a href="#" class="nav-item file-type-item" data-type="audio">
                        <div class="nav-icon">🎵</div>
                        <div>音频</div>
                    </a>
                    <a href="#" class="nav-item file-type-item" data-type="other">
                        <div class="nav-icon">📦</div>
                        <div>其它</div>
                    </a>
                    <a href="#" class="nav-item file-type-item" data-type="recent">
                        <div class="nav-icon">⏰</div>
                        <div>最近</div>
                    </a>
                </div>
            </div>

            <a href="#" class="nav-item" data-section="shares" data-iframe-src="shares.html">
                <div class="nav-icon">🔗</div>
                <div>我的分享</div>
            </a>
            <a href="#" class="nav-item" data-section="trash" data-iframe-src="trash.html">
                <div class="nav-icon">🗑️</div>
                <div>回收站</div>
            </a>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部搜索框 -->
        <div class="top-search-container">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索文件..." id="searchInput">
                <!-- 新增：提示面板 -->
                <div class="search-suggest" id="searchSuggest" style="display: none;position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;">
                    <!-- 历史记录/匹配内容将通过JS动态插入 -->
                </div>
                <button class="search-btn" onclick="performSearch()">搜索</button>
                <button class="advanced-search-btn" onclick="toggleAdvancedSearch()">高级搜索</button>
            </div>
            <!-- 用户名显示和退出按钮 -->
            <div class="user-section">
                <span id="userName" class="user-name" onclick="showLogoutMenu()" style="display: none; cursor: pointer; color: #666; font-size: 14px; padding: 8px 12px; border-radius: 4px; transition: background 0.2s;"></span>
                <div id="logoutMenu" class="logout-menu" style="display: none;">
                    <button class="logout-btn" onclick="logout()">退出登录</button>
                </div>
            </div>
        </div>
        
        <!-- iframe内容区域 -->
        <div class="content-iframe-container">
            <iframe id="contentIframe" src="/page/home" frameborder="0"></iframe>
        </div>
    </div>
</div>

<!-- 高级搜索弹窗 -->
<div class="advanced-search-modal" id="advancedSearchModal" style="display: none;">
    <div class="modal-backdrop" onclick="toggleAdvancedSearch()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3>高级搜索</h3>
            <button class="modal-close" onclick="toggleAdvancedSearch()">×</button>
        </div>
        <div class="modal-body">
            <div class="search-controls">
                <div class="control-group">
                    <label>时间范围：</label>
                    <select id="timeRange">
                        <option value="">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">最近一周</option>
                        <option value="month">最近一月</option>
                        <option value="year">最近一年</option>
                        <option value="custom">自定义</option>
                    </select>
                    <div class="custom-time" id="customTime" style="display: none;">
                        <input type="date" id="startDate" placeholder="开始日期">
                        <span>至</span>
                        <input type="date" id="endDate" placeholder="结束日期">
                    </div>
                </div>
                
                <div class="control-group">
                    <label>文件大小：</label>
                    <select id="fileSizeRange">
                        <option value="">全部大小</option>
                        <option value="0-1MB">小于1MB</option>
                        <option value="1-10MB">1MB-10MB</option>
                        <option value="10-100MB">10MB-100MB</option>
                        <option value="100MB+">大于100MB</option>
                        <option value="custom">自定义</option>
                    </select>
                    <div class="custom-size" id="customSize" style="display: none;">
                        <input type="number" id="minSize" placeholder="最小大小(MB)" min="0" step="0.1">
                        <span>至</span>
                        <input type="number" id="maxSize" placeholder="最大大小(MB)" min="0" step="0.1">
                    </div>
                </div>
                
                <div class="control-group">
                    <label>文件类型：</label>
                    <select id="fileTypeFilter">
                        <option value="">全部类型</option>
                        <option value="image">图片</option>
                        <option value="document">文档</option>
                        <option value="video">视频</option>
                        <option value="audio">音频</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="control-group">
                    <label>排序方式：</label>
                    <div class="sort-controls">
                        <select id="sortBy">
                            <option value="time" selected>按时间</option>
                            <option value="name">按名称</option>
                            <option value="size">按大小</option>
                            <option value="type">按类型</option>
                        </select>
                        <select id="sortOrder">
                            <option value="desc" selected>降序</option>
                            <option value="asc">升序</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="apply-search-btn" onclick="applyAdvancedSearch()">应用搜索</button>
            <button class="reset-search-btn" onclick="resetAdvancedSearch()">重置</button>
            <button class="cancel-search-btn" onclick="toggleAdvancedSearch()">取消</button>
        </div>
    </div>
</div>

<!-- 悬浮上传按钮 -->
<div class="floating-action" onclick="openUploadModal()">
    📤
</div>

<!-- 上传模态框 -->
<div class="upload-modal" id="uploadModal">
    <div class="upload-content">
        <div class="upload-header">
            <div class="upload-title">上传文件</div>
            <button class="close-btn" onclick="closeUploadModal()">×</button>
        </div>

        <div class="upload-body">
            <!-- 文件选择区域 -->
            <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
                <div class="upload-icon">📁</div>
                <div class="upload-text">点击选择文件或拖拽到此处</div>
                <div class="upload-hint">支持单个或多个文件上传</div>
            </div>

            <input type="file" id="fileInput" class="file-input" multiple>

            <!-- 文件列表显示区域 -->
            <div class="file-list-container" id="fileListContainer" style="display: none;">
                <div class="file-list-header">
                    <span>已选择的文件</span>
                    <button class="btn-clear" onclick="clearFileList()">清空</button>
                </div>
                <div class="file-list" id="fileList">
                    <!-- 文件列表将在这里动态生成 -->
                </div>
            </div>

            <!-- 上传进度 -->
            <div class="upload-progress" id="uploadProgress">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">准备上传...</div>
            </div>
        </div>

        <div class="upload-actions">
            <button class="btn btn-secondary" onclick="closeUploadModal()">取消</button>
            <button class="btn btn-primary" id="uploadBtn" onclick="startUpload()">开始上传</button>
        </div>
    </div>
</div>

<!-- 成功提示 -->
<div class="success-message" id="successMessage">
    <div>✅ 文件上传成功！</div>
</div>

<!-- 错误提示 -->
<div class="error-message" id="errorMessage">
    <div>❌ 上传失败，请重试</div>
</div>


</body>
<script>

</script>
</html>